<template>
  <div class="warp">
    <banner></banner>
    <div class="nav-list-box">
      <div class="nav-item" v-for="(item, idx) in navList" :key="idx">
        <div class="title">
          <h2>{{ item.describe }}</h2>
          <h2 class="icons"><i :class="item.icon"></i></h2>
        </div>
        <div class="mians">
          <div v-if="item.sort == 10" class="song-list-box">
            <div class="recom-song-item" v-for="(item, idx) in recomeSongList" :key="idx">
              <div class="img-box">
                <a href="javascript:;" :title="item.name">
                  <img :src="item.picUrl" alt="" /></a>
                <div class="bottm-box">
                  <i class="fa fa-headphones icon-headphones"></i>
                  <span>{{ item.playCount | newPlayCount }}</span>
                  <span class="fa fa-play-circle-o icon-play"></span>
                </div>
              </div>
              <a href="javascript:;" :title="item.name" class="song-text">{{
                item.name
              }}</a>
            </div>
          </div>
          <div v-if="item.sort == 20" class="popular-list-box">
            <a href="javascript:;" class="pop-song-item" v-for="(item, idx) in latestAlbum" :key="idx">
              <div class="left">
                <img :src="item.picUrl" alt="" />
                <i class="fa fa-play-circle"></i>
              </div>
              <div class="rig">
                <div>{{ item.name }}</div>
                <div>
                  {{
                    item.artist.name + item.artist.alias.length
                    ? +'/' + item.artist.alias.join('/')
                    : ''
                  }}
                </div>
                <div>{{ item.company }}</div>
              </div>
            </a>
          </div>
          <div v-if="item.sort == 30"></div>
          <div v-if="item.sort == 40"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from './banner/index.vue'
import { navList } from './data.js'
import {
  getLatestAlbum,
  getRecomSongList,
  getAllSongList,
} from '@/http/musicApi.ts'
export default {
  name: 'musicPage',
  components: {
    banner,
  },
  data() {
    return {
      navList: navList,
      recomeSongList: [], //推荐歌单
      limit: 16, //推荐歌单取出数量默认30
      latestAlbum: [], //热门音乐
      musicChartArr: {
        original: [], //原创
        soar: [], //飙升
        newSong: [],
      },
    }
  },
  methods: {},
  async mounted() {
    // 获取推荐歌单
    const songSheet = await getRecomSongList(this.limit)
    this.recomeSongList = Object.freeze(songSheet.result)
    // console.log(songSheet, '推荐歌单列表')
    //获取最新专辑
    const albumsData = await getLatestAlbum()
    this.latestAlbum = Object.freeze(albumsData.albums)
    // console.log(this.latestAlbum, albumsData, '获取最新专辑')
    // 获取音乐榜单
    // const musicChart = await getAllSongList()
    // this.musicChartArr.original = Object.freeze(
    //   musicChart.list.filter((e) => e.name == '原创榜')
    // )
    // this.musicChartArr.soar = Object.freeze(
    //   musicChart.list.filter((e) => e.name == '飙升榜')
    // )
    // this.musicChartArr.newSong = Object.freeze(
    //   musicChart.list.filter((e) => e.name.indexOf('新歌') > 0)
    // )
    // console.log(musicChart, this.musicChartArr, '获取音乐榜单')
  },
  filters: {
    newPlayCount(e) {
      let Txt = null
      Txt =
        e.toString().length > 4
          ? e.toString().substring(0, e.toString().length - 4) + ' 万'
          : e
      // console.log(Txt, '过滤信息')
      return Txt
    },
  },
  watch: {},
  computed: {},
}
</script>

<style scoped lang="less">
.warp {
  height: 100%;
  overflow: auto;
  padding: 0 20px;

  // background-color: white;
  .nav-list-box {
    // height: calc(100% - 568px);
    padding: 10px 0 150px 0;

    .nav-item {
      min-height: 250px;

      .title {
        display: flex;
        margin: 10px 0;

        .icons {
          padding-left: 15px;
        }
      }

      .mians {
        .song-list-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .recom-song-item {
            .img-box {
              position: relative;
              width: 140px;
              height: 140px;

              img {
                width: 100%;
                height: 100%;
              }

              .bottm-box {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #020202;
                // height: 27px;
                // background-position: 0 -537px;
                color: #ccc;
                font-size: 14px;
                opacity: 0.6;

                .icon-headphones {
                  padding: 6px;
                  font-size: 16px !important;
                }

                .icon-play {
                  position: absolute;
                  right: 10px;
                  bottom: 5px;
                  width: 16px;
                  height: 17px;
                  background-position: 0 0;
                  font-size: 16px !important;
                }
              }
            }

            .song-text {
              width: 140px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              overflow: hidden;
              -webkit-box-orient: vertical;
              line-height: 15px;
              padding: 5px 0;
              text-decoration: none;
              color: #000;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }

        .popular-list-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .pop-song-item {
            // display: block;
            display: flex;
            text-decoration: none;
            color: #000;
            width: 380px;
            margin-bottom: 15px;

            .left {
              position: relative;
              width: 82px;
              height: 82px;

              img {
                width: 100%;
                height: 100%;
              }

              i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: red;
                // background: #ccc;
                font-size: 33px;
              }
            }

            .rig {
              width: 350px;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              background: #bdb0b0;
            }
          }
        }
      }
    }
  }
}

// .box-rig10 {
//   margin-right: 10px;
// }
// .box-left10 {
//   margin-left: 10px;
// }
</style>
